<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  #app {
    position: fixed;
    top: 30px;
    margin: 0;
    padding: 20px;
    background: #67C23A;
    color: rgba(50, 250, 50);
    animation-name: animate;
    animation-duration: 1s;
    /* animation-timing-function: inherit; */
  }

  @keyframes animate {
    0% {
      opacity: 0;
      top: 0
    }

    /* 25% {
      opacity: 0.2;
      top: 7.5px
    }

    50% {
      opacity: 0.5;
      top: 15px;
    } */

    100% {
      opacity: 1;
      top: 30px
    }
  }
</style>

<body>
  <div class='sapp'>

  </div>
  <input type="text" class='app'>
</body>
<script>
  class APromise {
    constructor(executor) {
      this.status = 'pending'
      this.value = undefined
      this.reason = undefined
      // 存放回调成功的函数
      this.onResolveCallbacks = []
      // 存放回调失败的函数
      this.onRejectCallbacks = []
      let resolve = (data) => {
        if (this.status === 'pending') {
          this.value = data
          this.status = 'resolved'
          this.onResolveCallbacks.forEach(fn => {
            fn()
          })
        }
      }

      let reject = (reason) => {
        if (this.status === 'pending') {
          this.reason = reason
          this.status = 'rejected'
          this.onRejectCallbacks.forEach(fn => {
            fn()
          })
        }
      }
      try {
        executor(resolve, reject)
      } catch (e) {
        reject(e)
      }
    }
    then(onFulFilled, onRejected) {
      if (this.status === 'resolved') {
        onFulFilled(this.value)
      }
      if (this.status === 'rejected') {
        onRejected(this.reason)
      }
      if (this.status === 'pending') {
        // 存放成功的回调
        this.onResolveCallbacks.push(() => {
          onFulFilled(this.value)
        })
        this.onRejectCallbacks.push(() => {
          onRejected(this.reason)
        })
      }
    }
  }

  // let p = new APromise((res, rej) => {
  //   let arr = Math.random()
  //   if (arr > 0.5) {
  //     res('成功了' + arr)
  //   } else {
  //     rej('失败了' + arr)
  //   }
  // })
  // p.then((res) => {
  //   console.log(res)
  // }, (rej) => {
  //   console.log(rej)
  // })
</script>

</html>